<template>
    <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false" :router="true">
        <el-menu-item index="0">
            <img width="60" height="60" src="../assets/logo.png" alt="logo" />
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item v-if="$store.state.user.is_login">
            <el-sub-menu>
                <template #title>{{ $store.state.user.name }}</template>
                <el-menu-item @click="logout">退出登录</el-menu-item>
            </el-sub-menu>
        </el-menu-item>
        <el-menu-item v-else-if="!$store.state.user.pulling_info || route_name == 'user_register'" index="/user/login">
            登录
        </el-menu-item>
        <el-menu-item index="/user/register/"
            v-if="(!$store.state.user.pulling_info || route_name == 'user_register') && !$store.state.user.is_login">
            注册
        </el-menu-item>
    </el-menu>
</template>

<script>
import { useRoute } from 'vue-router'
import { computed } from 'vue'
import { useStore } from 'vuex'
import router from '@/router/index'

export default {
    setup() {
        const store = useStore();
        const route = useRoute();
        let route_name = computed(() => route.name)
        const logout = () => {
            store.dispatch("logout");
            router.push({ name: 'user_login' })
        }
        return {
            route_name,
            logout,
        }
    },
}
</script>

<style scoped>
.navbar-nav>.nav-item>.active {
    border-bottom: 2px solid skyblue;
}

.mleft {
    margin-left: 40px;
}

.flex-grow {
    flex-grow: 1;
}
</style>